<template>
    <div class="selection" :class="className">
        <div class="list">
            <a 
            v-for="(item, index) in Object.keys(optList)" 
            :key="optList[item].id"
            @click="select(optList[item].id, index)"
            :class="optListAct === optList[item].id ? 'active' : ''"
            class="btn"
            v-html="optList[item].name">
            </a>
        </div>
        <div class="line" :style="{left: `${lineTopLeft * 33.33}%`}"></div>
    </div>
</template>

<script>
export default {
    name: 'selection',
    props: {
        optList: {
            type: Object,
            default: {}
        },
        optListAct: {
            type: String,
            default: '',
        },
		eventName: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            lineTopLeft: 0,
            eventNameList: ['']
        }
    },
    methods: {
        select(id, index) {
            if (id) {
                this.$emit('chooseOpt', id)
                this.lineTopLeft = index
            }
        }
    },
    computed: {
        className() {
            if (this.eventNameList.includes(this.eventName)) {
                return ''
            }
            return 'over-content-show'
        }
    }
}
</script>

<style lang="scss" scoped>
.selection {
    height: 40px;
    width: 100%;
    position: relative;
    background: white;

    .list {
        display: flex;
        width: 100%;
        height: 100%;

        .btn {
            width: 33.3333%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333333;
        }

        .active {
            color: #0077bf;
            font-weight: bold;
        }
    }

    .line {
        height: 1px;
        width: 33.33%;
        position: absolute;
        left: 0;
        bottom: 0px;
        background: #0077bf;
        transition: left .4s;
    }
}
.over-content-show {
    z-index: 2;
}
</style>
<style>
.opt-sti {
    font-size: 12px;
}
</style>